<template>
  <div class="commonBoxmp">
    <TableV2
      class="flex1"
      :isInit="false"
      ref="tableV2Ref"
      :apiFunction="listJobLog"
      selection
      :columns="state.columnData"
    >
      <template #tableHeader>
        <div class="jcb aic w100">
          <el-form
            :model="queryParams"
            ref="queryForm"
            size="small"
            :inline="true"
          >
            <el-form-item label="系统模块" prop="title">
              <el-input
                v-model="queryParams.title"
                placeholder="请输入系统模块"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="操作人员" prop="operName">
              <el-input
                v-model="queryParams.operName"
                placeholder="请输入操作人员"
                clearable
                style="width: 240px"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item label="类型" prop="businessType">
              <selectDict
                v-model="queryParams.businessType"
                class="w100"
                @change="handleQuery"
                placeholder="操作类型"
                dictCode="sys_job_group"
              />
            </el-form-item>
            <el-form-item label="状态" prop="status">
              <selectDict
                v-model="queryParams.status"
                class="w100"
                @change="handleQuery"
                placeholder="操作状态"
                dictCode="sys_common_status"
              />
            </el-form-item>
            <el-form-item label="操作时间">
              <el-date-picker
                v-model="state.dateRange"
                style="width: 240px"
                value-format="yyyy-MM-dd HH:mm:ss"
                type="daterange"
                range-separator="-"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :default-time="['00:00:00', '23:59:59']"
              ></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="mini" @click="handleQuery"
                >搜索</el-button
              >
              <el-button size="mini" @click="resetQuery">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
      </template>
      <template #operation>
        <el-table-column label="操作" fixed="right" width="160px" align="left">
          <template #default="scope">
            <el-link type="primary" @click="handleView(scope.row)"
              >详情</el-link
            >
          </template>
        </el-table-column>
      </template>
    </TableV2>

    <el-dialog
      v-model="state.userVisible"
      title="操作日志详细"
      width="50%"
      destroy-on-close
      center
    >
      <el-form ref="form" :model="state.form" label-width="100px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="操作模块："
              >{{ state.form.title }} /
              {{ typeFormat(state.form) }}</el-form-item
            >
            <el-form-item label="登录信息："
              >{{ state.form.operName }} / {{ state.form.operIp }} /
              {{ state.form.operLocation }}</el-form-item
            >
          </el-col>
          <el-col :span="12">
            <el-form-item label="请求地址：">{{
              state.form.operUrl
            }}</el-form-item>
            <el-form-item label="请求方式：">{{
              state.form.requestMethod
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="操作方法：">{{
              state.form.method
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="请求参数：">{{
              state.form.operParam
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="返回参数：">{{
              state.form.jsonResult
            }}</el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="操作状态：">
              <div v-if="state.form.status === 0">正常</div>
              <div v-else-if="state.form.status === 1">失败</div>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="消耗时间："
              >{{ state.form.costTime }}毫秒</el-form-item
            >
          </el-col>
          <el-col :span="10">
            <el-form-item label="操作时间：">{{
              parseTime(state.form.operTime)
            }}</el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="异常信息：" v-if="state.form.status === 1">{{
              state.form.errorMsg
            }}</el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="state.userVisible = false">取消</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="tsx">
import {
  ref,
  reactive,
  getCurrentInstance,
  onMounted,
  nextTick,
  unref,
} from "vue";
import { useRouter, useRoute } from "vue-router";
import Column from "/@ts/components/table/Column";
import selectDict from "/@/components/selectDict/index.vue";
import DictTag from "/@/components/DictTag/index.vue";
import { ElMessage, ElMessageBox, FormInstance } from "element-plus";

import {
  listJobLog,
  delJobLog,
  cleanJobLog,
} from "/@ts/axios/urlApi/monitor/jobLog";
import formatTool from "/@ts/hooks/format";
import { routerPush } from "/@ts/hooks/route";
const router = useRouter();
const route = useRoute();
const { parseTime, addDateRange, getDict, selectDictLabel } = formatTool();

const typeFormat = (row: any, column: any) => {
  return selectDictLabel(dict.sys_job_group, row.businessType);
};
const state: any = reactive({
  // 表格基础配置 start
  form: {},
  title: "",
  rules: {
    postName: [
      { required: true, message: "岗位名称不能为空", trigger: "blur" },
    ],
    postCode: [
      { required: true, message: "岗位编码不能为空", trigger: "blur" },
    ],
    postSort: [
      { required: true, message: "岗位顺序不能为空", trigger: "blur" },
    ],
  },
  dateRange: [], //时间范围筛选

  height: 0,
  tableData: [],
  columnData: [
    {
      label: "日志编号",
      prop: "jobLogId",
      visible: true,
    },
    {
      label: "任务名称",
      prop: "jobName",
      visible: true,
    },
    {
      label: "任务组名",
      prop: "jobGroup",
      render: ({ row }: any) => {
        return (
          <DictTag values={row.jobGroup} options={dict.sys_job_group}></DictTag>
        );
      },
    },
    {
      label: "调用目标字符串",
      prop: "invokeTarget",
      visible: true,
    },
    {
      label: "日志信息",
      prop: "jobMessage",
      visible: true,
    },
    {
      label: "执行状态",
      render: ({ row }: any) => {
        return (
          <DictTag
            values={row.status}
            options={dict.sys_common_status}
          ></DictTag>
        );
      },
      prop: "status",
      visible: true,
    },

    {
      label: "执行时间",
      prop: "createTime",
      visible: true,
    },
  ],
  loading: false,
  // 表格基础配置 end
});
// 表格基础配置 start
const pageInfo = reactive({
  currentPage: 1,
  total: 10,
  pageSize: 10,
  pageSizes: [10, 20, 30, 40],
  layout: "total, prev, pager, next,sizes",
});
let queryFormInit = {
  pageNum: 1,
  pageSize: 10,
};
const queryParams: any = reactive(JSON.parse(JSON.stringify(queryFormInit)));
const getCurrentColumns = (data: Column[]) => {
  state.columnData = data;
};
const getHeight = (height: number) => {
  state.height = height;
};
const handleSizeChange = (size: number) => {
  pageInfo.pageSize = size;
  getList();
};
const handleCurrentChange = (page: number) => {
  pageInfo.currentPage = page;
  getList();
};
const tableV2Ref = ref();
/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNum = 1;
  let params = unref(queryParams);
  tableV2Ref.value.getList(params);
};
const resetQuery = () => {
  // 将对象的属性复制为初始值
  Object.assign(queryParams, queryFormInit);
  handleQuery();
};

const handleDelete = (row: any) => {
  const postId = row.postId;
  ElMessageBox.confirm('是否确认删除编号为"' + postId + '"的数据项？')
    .then(function () {
      return delJobLog(postId);
    })
    .then(() => {
      ElMessage.success("删除成功");
      getList();
    })
    .catch(function () {});
};
/** 修改按钮操作 */
const handleView = (row: any) => {
  state.form = row;
  state.userVisible = true;
};
const handleAdd = () => {
  state.form = {};
  state.title = "添加岗位";
  state.userVisible = true;
};
// 表格基础配置 end
//查询用户列表
const getList = () => {
  state.loading = true;
  queryParams.pageNum = pageInfo.currentPage;
  queryParams.pageSize = pageInfo.pageSize;
  listJobLog(addDateRange(queryParams, state.dateRange)).then(
    (response: any) => {
      state.tableData = response.rows;
      pageInfo.total = response.total;
      state.loading = false;
    },
  );
};
const handleDetail = (postId: any) => {
  routerPush({
    path: "/system/dict-data/index/" + postId,
  });
};
let dict: any = reactive({
  sys_job_group: [],
  sys_common_status: [],
});
const ruleFormRef = ref<FormInstance>();
onMounted(async () => {
  dict.sys_job_group = await getDict("sys_job_group");
  dict.sys_common_status = await getDict("sys_common_status");
  const jobId: any = route.params && route.params.jobId;
  if (jobId) {
    queryParams.jobId = jobId;
    let params = unref(queryParams);
    tableV2Ref.value.getList(params);
  }
});
</script>

<style scoped lang="scss"></style>
